import React, { useState, useEffect } from 'react';
import 'antd/dist/antd.css'
import '../css/index.scss'
import Add from '../add'
import See from '../see'
import { Table, Button, Select, Space, Modal, Form, Input, message,InputNumber } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';

export default function Forms() {
    // 表格数据
    const [data, setdata] = useState(
        [
            {
                id: 1,
                key: 1,
                user: '13882701266',
                name: '吕布',
                member: 1,
                invitation: 800,
                SuccessfulInvitation: 100,
                reward: 10000,
                state: 1
            },
            {
                id: 2,
                key: 2,
                user: '15782751261',
                name: '赵云',
                member: 2,
                invitation: 1000,
                SuccessfulInvitation: 900,
                reward: 90000,
                state: 1
            },
            {
                id: 3,
                key: 3,
                user: '15082701461',
                name: '关羽',
                member: 3,
                invitation: 200,
                SuccessfulInvitation: 199,
                reward: 19900,
                state: 1
            },
            {
                id: 4,
                key: 4,
                user: '135082622266',
                name: '马超',
                member: 4,
                invitation: 500,
                SuccessfulInvitation: 40,
                reward: 4000,
                state: 1
            },
            {
                id: 5,
                key: 5,
                user: '135082722266',
                name: '张飞',
                member: 1,
                invitation: 2000,
                SuccessfulInvitation: 200,
                reward: 200000,
                state: 1
            },
            {
                id: 6,
                key: 6,
                user: '125082722266',
                name: '黄忠',
                member: 2,
                invitation: 100,
                SuccessfulInvitation: 10,
                reward: 1000,
                state: 1
            },
            {
                id: 7,
                key: 7,
                user: '132082722266',
                name: '许褚',
                member: 3,
                invitation: 20,
                SuccessfulInvitation: 20,
                reward: 2000,
                state: 1
            },
            {
                id: 8,
                key: 8,
                user: '135282722266',
                name: '孙策',
                member: 4,
                invitation: 500,
                SuccessfulInvitation: 20,
                reward: 2000,
                state: 1
            },
        ]
    )
    const [datas, setdatas] = useState()
    const datal = (a) => {
        setdatas(() => ([...a]))
    }
    useEffect(() => {
        datal(data)
    }, []);
    // 表格
    const columns = [
        {
            title: '用户ID',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
            width: 80,
        },
        {
            title: '用户账号',
            dataIndex: 'user',
            key: 'user',
            align: 'center',
            width: 120,
        },
        {
            title: '用户昵称',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
            width: 80,
        },
        {
            title: '会员等级',
            dataIndex: 'member',
            key: 'member',
            align: 'center',
            width: 90,
            render(text) {
                return text === 1 ? '普通会员' : text === 2 ? '白银会员' : text === 3 ? '黄金会员' : '钻石会员'
            }
        },
        {
            title: '邀请好友',
            dataIndex: 'invitation',
            key: 'invitation',
            align: 'center',
            width: 100,
            render(text) {
                return text + ' (个)'
            }
        },
        {
            title: '成功交易好友',
            dataIndex: 'SuccessfulInvitation',
            key: 'SuccessfulInvitation',
            align: 'center',
            width: 100,
            render(text) {
                return text + ' (个)'
            }
        },
        {
            title: '累计奖励',
            dataIndex: 'reward',
            key: 'reward',
            align: 'center',
            width: 100,
            render(text) {
                return text + ' (元)'
            }
        },
        {
            title: '操作',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
            width: 100,
            render: text => <div><Button size="small" onClick={() => see(text)}>查看</Button></div>,
        },
    ];
    const [seedatas, setseedatas] = useState({})
    // 查看
    const see = (text) => {
        console.log(text);
        let a = datas.filter((item) => item.id === text)
        setseedatas(() => a[0])
        setVisible(true)
    }
    // 搜索框
    const [datax, setdatax] = useState(data)
    const setdataxs = (b) => {
        setdatax(() => ([...b]))
    }
    const search = (e) => {
        return datax.filter((item) => e === item.user || e === item.name || e === item.member)
    }
    // 账号搜索
    const [form] = Form.useForm();
    const couponName = (e) => {
        if (e.target.value) {
            let a = search(e.target.value)
            if (a.length !== 0) {
                setdataxs(a)
                datal(a)
                console.log(a);
                message.success('搜索成功');
            } else {
                datal(data)
                setdatax(() => data)
                form.resetFields();
                message.error('暂无数据');
            }
        } else {
            datal(data)
            form.resetFields();
            message.error('不能为空哦');
        }
    }
    // 昵称搜索
    const couponName2 = (e) => {
        if (e.target.value) {
            let a = search(e.target.value)
            if (a.length !== 0) {
                setdataxs(a)
                datal(a)
                message.success('搜索成功');
                console.log(a);
            } else {
                datal(data)
                setdatax(() => data)
                form.resetFields();
                message.error('暂无数据');
                console.log(a);
            }
        } else {
            datal(data)
            form.resetFields();
            message.error('不能为空哦');
        }
    }
    // 会员等级搜索
    const gender = (e) => {
        let a = search(e)
        if (a.length !== 0) {
            setdataxs(a)
            datal(a)
            message.success('搜索成功');
            console.log('1', a);
        } else {
            datal(data)
            setdatax(() => data)
            form.resetFields()
            message.error('暂无数据');
            console.log('2', a);
        }
    }
    // 排序
    const sortpulas = (property) => {
        return function (a, b) {
            var value1 = a[property];
            var value2 = b[property];
            return value1 - value2;
        }
    }
    const sorts = (e) => {
        let a = data
        if (e === 1) {
            a.sort(sortpulas('invitation'))
            console.log(a);
            datal(a)
        } else if (e === 2) {
            a.sort(sortpulas('SuccessfulInvitation'))
            console.log(a);
            datal(a)
        } else {
            a.sort(sortpulas('member'))
            console.log(a);
            datal(a)
        }

    }
    // 表格状态
    const [visible, setVisible] = useState(false)
    // 表格选择框
    const state = {
        selectedRowKeys: [],
        loading: false,
    };

    const onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
    };

    const { loading, selectedRowKeys } = state;
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    return (
        <div>
            <div className="boders">
                <Form
                    layout="inline"
                    form={form}
                >
                    <Form.Item className="bg">
                        <span className="text">筛选查询</span>
                    </Form.Item>
                    <Form.Item label="用户账号" name='a' style={{ width: '25%', padding: 10 }}>
                        <Input placeholder="请输入帮助标题" onBlur={couponName} />
                    </Form.Item>
                    <Form.Item label="用户昵称" name='b' style={{ width: '25%', padding: 10 }}>
                        <Input placeholder="请输入帮助标题" onBlur={couponName2} />
                    </Form.Item>
                    <Form.Item label="会员等级" name='c' style={{ width: '25%', padding: 10, textAlign: 'left' }}>
                        <Select placeholder="请选择帮助分类" onChange={gender} getPopupContainer={triggerNode => triggerNode.parentNode}>
                            <Select.Option value={1}>普通会员</Select.Option>
                            <Select.Option value={2}>白银会员</Select.Option>
                            <Select.Option value={3}>黄金会员</Select.Option>
                            <Select.Option value={4}>钻石会员</Select.Option>
                        </Select>
                    </Form.Item>
                </Form>
            </div>
            <div className="from">
                <div className="bg">
                    <span className="text">数据列表</span>

                    <div className="right">
                        <Select placeholder="请选择排序方式" style={{ width: 150 }} onChange={sorts} getPopupContainer={triggerNode => triggerNode.parentNode}>
                            <Select.Option value={3}>会员等级</Select.Option>
                            <Select.Option value={1}>邀请的好友</Select.Option>
                            <Select.Option value={2}>成功交易的好友</Select.Option>
                        </Select>
                    </div>
                </div>

                <Table bordered rowSelection='checkbox ' columns={columns} dataSource={datas} />

                <Modal
                    getContainer={false}
                    title="查看详情"
                    centered
                    visible={visible}
                    onOk={() => setVisible(false)}
                    onCancel={() => setVisible(false)}
                    width={600}
                    footer={null}
                >
                    <See seedatas={seedatas} />
                </Modal>
            </div>
        </div>
    )
}
